<template>
  <div class="userlist">
    <!-- 面包屑 -->
    <div class="bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 筛选搜索 -->
    <div class="search">
      <div class="search-top">
        <div class="left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="right">
          <el-button @click="reset">重置</el-button>
          <el-button @click="onSearch" type="primary">查询搜素</el-button>
        </div>
      </div>
      <div class="search-bottom">
        <span class="search-name">账号/姓名:</span>
        <el-input type="text" placeholder="请输入角色名称" v-model="name" />
      </div>
    </div>
    <!-- 数据列表 -->
    <el-card shadow="always">
      <div class="data-list">
        <div class="left">
          <el-icon size="16">
            <Tickets />
          </el-icon>
          <span>数据列表</span>
        </div>
        <div class="right">
          <el-button type="primary" @click="onAddUser">添加</el-button>
        </div>
      </div>
    </el-card>
    <!-- 用户表格 -->
    <div class="list">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="55" />
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="adminCount" label="用户数" />
        <el-table-column label="添加时间" width="200">
          <!-- slot插槽写法，scope就是作用插插槽，scope.row 就是数据 -->
          <template #default="scope">
            <div>
              {{
                scope.row.createTime
                ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                : "/"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template #default="scope">
            <el-switch :value="scope.row.status === 1 ? true : false" @click="onClick(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="btn(scope.row.id)">分配菜单
            </el-button>
            <el-button link type="primary" size="small" @click="btnClick(scope.row.id)">
              分配资源
            </el-button>
            <el-button link type="primary" size="small" @click="onEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="fenye">
      <el-pagination v-model:current-page="pagination.pageNum" v-model="pagination.pageSize" :page-sizes="[1, 5, 10, 20]"
        background layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 弹出框 -->
    <roleEdit :visible="visible" @cancel="onCloseDialog" @confirms="onConfirmDialog" :form="modalForm" />
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import type { Ref } from "vue";
import * as api from "../../json/request/api";
import useTable from "../../hooks/useTables";
import roleEdit from "../ums/roleEdit.vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { IAdminListItem, IRoleListItem } from '../../json/request/QmsAdminConreiller/index';
import { useRouter } from "vue-router";

// 使用路由函数
const router = useRouter();

//分配角色点击事件
const btn = (i: any) => {
  // router.push({
  //   path: "/ums/DistributionMenu",
  //   query: {
  //     id: i,
  //   },
  // });
  router.push({
    path: "/ums/allocMenu",
    query: {
      id: i,
    },
  })
};

let onClick = (val: any) => {
  val.status = val.status == 1 ? 0 : 1
}
//分配资源的点击使事件
const btnClick = (i: any) => {
  router.push({
    path: "/ums/allocResource",
    query: {
      id: i,
    },
  });

};
// 搜索框数据
let name = ref("");
// false编辑，true新增
let add = false;
let modalForm = ref({}) as Ref<IAdminListItem>;

let {
  tableData,
  getTableData,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTable(api.admin.getAdminRole, {
  keyword: name, //name是响应式的
});

// 添加角色对话框显示隐藏判断
let visible = ref(false);

// 添加用户
let onAddUser = () => {
  console.log(1);

  // console.log(123);
  visible.value = true;
  add = true;
};
// 编辑
let onEdit = (row: IAdminListItem) => {
  add = false;
  modalForm.value = row;
  visible.value = true;
  // name.value = "超级管理员";
};

// 搜索按钮
let onSearch = async () => {
  // console.log(name.value);
  // 发起请求，搜索数据
  getTableData();
  // let listData = await api.admin.getAdminList({ keyword: name.value })
  // console.log(listData);
};
// 重置输入框数据
const reset = () => {
  name.value = "";
};

// 子级 emit组件传过来的事件
const onCloseDialog = () => {
  visible.value = false;
};

// 确认了输入框的内容之后
const onConfirmDialog = (row: IAdminListItem) => {
  // console.log(row);
  ElMessageBox.confirm("此操作将添加当前用户信息，是否继续？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 发请求
      // await api.admin.getRegister(row)
      if (add) {
        await api.admin.rolesRegister(row); //新增
        // console.log(row);
      } else {
        await api.admin.orderbj(row)
      }
      ElMessage({
        type: "success",
        message: "添加成功",
      });
      visible.value = false;
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "您已取消",
      });
    });
};

//分配角色对话框显示隐藏控制
let assign = ref(false);

//对话框显示隐藏点击事件
const AssignRoles = (id: number) => {
  assign.value = !assign.value;
  console.log(id);
};

//改变分配角色的对话框影藏点击事件
const onChangeAssign = () => {
  assign.value = false;
};

//菜单事件
</script>

<style lang="scss" scoped>
.userlist {
  color: #303133;

  .bread {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }

  .search {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    font-size: 14px;

    .search-top {
      display: flex;
      justify-content: space-between;

      .left {
        // float: left;
        width: 18%;

        .el-icon {
          padding-right: 10px;
        }

        .el-button {
          font-size: 14px;
        }
      }
    }

    .search-bottom {
      display: flex;
      justify-content: flex-start;
      overflow: hidden;
      padding: 20px 40px 0;

      .search-name {
        line-height: 34px;
        padding-right: 10px;
      }
    }

    .el-input {
      width: 200px;
      font-size: 14px;
    }
  }

  .el-card {
    .data-list {
      display: flex;
      justify-content: space-between;

      .left {
        .el-icon {
          padding-right: 10px;
        }
      }
    }
  }

  .list {
    margin: 20px 0;
  }

  .fenye {
    float: right;
  }
}
</style>
